<!--
 * @Author: DUST
 * @Date: 2023-06-07 11:01:22
 * @LastEditors: DUST
 * @LastEditTime: 2023-06-27 09:55:18
 * @FilePath: \vite-project\src\views\browse\noteList\details.vue
 * @Description: 
 * undefined
-->
<template>
  <browsePageTemplate>
    <template #banner>
      <!-- banner -->
      <div class="topInfo">
        <div class="detailsHeader">
          <div class="detailsTitle">{{ detailsData?.title }}</div>
          <div class="breadcrumb">
            <a-breadcrumb separator=">">
              <a-breadcrumb-item v-for="item of pathMap" :key="item.meta.key" @click="goPath(item.path)">
                {{ item.meta.title }}
              </a-breadcrumb-item>
            </a-breadcrumb>
          </div>
          <div class="detailsCountBox">
            <span>
              <StarOutlined class="mr8" />
              {{ detailsData?.star }}
            </span>
            <a-divider type="vertical" />
            <span>
              <EyeOutlined class="mr8" />
              {{ detailsData?.browseNum }}
            </span>
            <a-divider type="vertical" />
            <span>
              <CIcon color="#fff" type="icon-editor" class="mr8" />
              {{ detailsData?.author }}
            </span>
          </div>
          <div class="detailsTimeAndTag">
            <span>
              发布时间：
              {{ timeFormat(detailsData?.createTime, "YYYY-MM-DD HH:mm:ss") }}
            </span>
            <a-divider type="vertical" />
            <span>
              更新时间：
              {{ timeFormat(detailsData?.upTime, "YYYY-MM-DD HH:mm:ss") }}
            </span>
          </div>
          <div class="tagBox" v-if="detailsData?.tagList">
            <a-tag
              class="tag"
              :color="tagItem.color"
              v-for="tagItem of detailsData?.tagList"
              :key="tagItem.id"
            >
              {{ tagItem.name }}
            </a-tag>
          </div>
        </div>
      </div>
      <browsePageBanner />
    </template>
    <div class="detailsContent" v-highlight v-html="detailsData?.content"></div>
  </browsePageTemplate>
</template>

<script lang="ts" setup>
import { StarOutlined, EyeOutlined } from "@ant-design/icons-vue";
import timeFormat from "@/utils/time";
import router from "@/router";
import details from "./details";

const { detailsData, goPath, pathMap } = new details(router.currentRoute.value);
// const pathMap = ref(router.currentRoute.value.matched);
// onMounted(() => {
//   console.log(router.currentRoute.value.matched[1], router.currentRoute.value);
// });
</script>
